:root{
    /*color palette*/
    --p-white: #FFFFFF;
    --white: #FAFAFA;
    --black-col: 8,8,8;
    --black: rgb(var(--black-col));
    --d-grey: #252525;
    --m-grey: #979797;
    --l-grey: #CCCCCC;
    --xl-grey: #F2F2F2;
    --orange: #C65306;
    --blue: #2692FF;
    --d-blue: #062E52;
    --m-blue: #0074D4;
    --red: #F01346;
    --green: #15B76C;
    --purple: #6446E6;
    --yellow: #FF9E01;

    /*main theme variables*/
    --text: var(--p-white);
    --text-secondary: var(--m-grey);
    --primary: var(--blue);
    --secondary: var();
    --active: var(--m-blue);
    --inactive: var(--d-blue);
    --app-accent: var(--primary);

    /*backgrounds*/
    --background: var(--black);
    --control-background: var(--d-grey);
    --textual-background: var(--d-grey);
    --surface-background: var(--d-grey);
    --alt-surface-background: var(--d-grey);
    /* 
    These inherit from the light theme
    --frosted-opacity: 0.8;
    --frosted-blur-size: 10px; */
    --frosted-background-color: rgba(var(--black-col), var(--frosted-opacity));

    /*accents*/
    --error: var(--red);
    --confirmation: var(--green);
    --accent-badge: var(--orange);

    /*on top colors*/
    --on-primary: var(--p-white);
    --on-secondary: var();
    --on-active: var(--p-white);
    --on-background: var(--white);
    --on-alt-background: var(--l-grey);
    --on-surface: var(--p-white);
    --on-error: var(--p-white);
    --on-confirmation: var(--white);
    --on-accent-badge: var(--p-white);

    /*borders*/
    --border-surface: var(--xl-grey);
    --border-alt-surface: var(--d-grey);
    --border-control: var(--d-grey);
    
    /*misc*/
    --shadow-color: rgba(var(--black-col), 0.3);
}
